element-ui button和button-group组件源码学习

继续看其他组件，接下来看下比较常用的button组件。

一、button组件html结构

整个button组件是基于原生的button元素实现的。我们来看下这个元素的属性值。

class="el-button"，el-button的样式。 @click="handleClick"，按钮的click事件。

:disabled="buttonDisabled || loading"，当按钮的使能或者loading时，disabled生效。

:autofocus="autofocus"，是否自动聚焦。

:type="nativeType"，原生的type属性，控制type的实际类型。

class则是一些样式的控制，不一一举例了，命名也大致可以看出了。

紧接着是一个loading时的icon图标。后面则是一个button图标。 接下来的span元素则存放着按钮的显示文字。 整个button的html就这么简单。

二、button组件JS部分

name

名称

inject

注入elForm和elFormItem，当没有配合表单使用时，当作默认值使用。

props

这些属性大多和样式的控制有关。

• type：按钮样式类型，默认是default类型
• size：按钮尺寸大小
• icon：icon的class类
• nativeType：原生 type 属性
• loading：是否加载中状态
• disabled：是否禁用状态
• plain：是否朴素按钮
• autofocus：是否默认聚焦
• round：是否圆角按钮
• circle：是否圆形按钮

computed

• _elFormItemSize()，与formitem配合使用，计算formitem的size。
• buttonSize()，用于计算button的大小。
• buttonDisabled()，根据当前或者form的disabled状态确定button是否禁用。

methods

• handleClick()，button按钮的click事件，用于触发实例上的方法。

handleClick(evt) {
    // 触发当前实例上的click事件
    // 比如我们外部使用时，可以直接增加click方法
    this.$emit('click', evt);
}

button部分的代码实际还好比较简单，下面看下他的group组件。

三、button-group组件

该组件与button组件配合使用，十分的简单，html部分的话，仅是在内嵌的button元素外嵌套了一层div元素。 JS的话，只是给组件增加了个name的名称属性。

带注释的源码下载路径：button组件和button-group组件。